<template>
    <div class="big-box">
        <div class="nr-center">
            <n-tabs type="line" animated>

                <n-tab-pane name="1" tab="教师列表">
                    <div class="sqlb">
                        <el-table :data="pageDate" class="table-data">
                            <el-table-column prop="courseCover" label="头像" width="80" #default="one">
                                <el-image class="FM_img" :src="one.row.profilePic" />
                            </el-table-column>
                            <el-table-column prop="userName" label="账号名" width="150"></el-table-column>
                            <el-table-column prop="nickName" label="用户昵称" width="150"></el-table-column>
                            <el-table-column prop="email" label="邮箱" ></el-table-column>
                            <el-table-column prop="courseIntro" width="120" label="撤职" #default="data">
                                <el-tooltip effect="light" content="确认撤职？撤职后该账号将成为学生账号。" placement="top">
                                    <el-image src="/src/assets/svg/delete1.svg" class="bj-img" @click="expelTeacher(data.row.userId)"/>
                                </el-tooltip>
                            </el-table-column>
                        </el-table>
                    </div>
                </n-tab-pane>

                <n-tab-pane name="2" tab="教师权限申请">
                    <div>
                        <el-table :data="roleapplyList" class="table-data">
                            <el-table-column prop="courseCover" label="头像" width="80" #default="one">
                                <el-image class="FM_img" :src="one.row.profilePic" />
                            </el-table-column>
                            <el-table-column prop="userName" label="账号名" width="150"></el-table-column>
                            <el-table-column prop="nickName" label="用户昵称" width="150"></el-table-column>
                            <el-table-column prop="email" label="邮箱" width="180"></el-table-column>
                            <el-table-column prop="applyTime" label="申请时间" width="200"></el-table-column>
                            <el-table-column prop="text" label="申请理由" min-width="300px"></el-table-column>
                            <el-table-column prop="courseIntro" label="通过" width="80" #default="pass">
                                <el-tooltip effect="light" content="通过" placement="top">
                                    <el-image src="/src/assets/svg/success.svg" @click="passRoleApply(pass.row.applyId)"
                                        class="bj-img" />
                                </el-tooltip>
                            </el-table-column>
                            <el-table-column prop="courseIntro" label="拒绝" width="80" #default="refuse">
                                <el-tooltip effect="light" content="拒绝申请" placement="top">
                                    <el-image src="/src/assets/svg/reject.svg"
                                        @click="refuseRoleApply(refuse.row.applyId)" class="bj-img" />
                                </el-tooltip>
                            </el-table-column>
                        </el-table>
                    </div>
                </n-tab-pane>
            </n-tabs>
        </div>
    </div>
</template>

<script setup>
import adminHttp from '@/api/adminHttp';
import { openInfo } from '@/utils/openInfo';
import { onMounted, ref } from 'vue';
const pageDate = ref([])
const roleapplyList = ref([])

onMounted(() => {
    getAllTeacher()
    getAllRoleApply()
})
const getAllTeacher = () => {
    adminHttp.getAllTeacher().then((res) => {
        if (res.code == 200) {
            console.log(res);
            pageDate.value = res.data
        }
    })
}
const getAllRoleApply = () => {
    adminHttp.getAllRoleApply().then((res) => {
        if (res.code == 200) {
            console.log(res);
            roleapplyList.value = res.data
            for (let i = 0; i < roleapplyList.value.length; i++) {
                roleapplyList.value[i].applyTime = roleapplyList.value[i].applyTime.replace("T", " ")

            }
        }
    })
}
//通过申请
const passRoleApply = (applyId) => {
    adminHttp.passRoleApply(applyId).then((res) => {
        if (res.code == 200) {
            openInfo("操作成功")
            getAllTeacher()
            getAllRoleApply()
        }
    })
}
//拒绝申请
const refuseRoleApply = (applyId) => {
    adminHttp.refuseRoleApply(applyId).then((res) => {
        if (res.code == 200) {
            openInfo("操作成功")
            getAllTeacher()
            getAllRoleApply()
        }
    })
}


//删除
const expelTeacher = (userId)=>{
    adminHttp.expelTeacher(userId).then((res)=>{
        
    if (res.code == 200) {
        getAllTeacher()
    }
    })
}



</script>


<style scoped>
.big-box {
    display: flex;
    justify-content: center;
}

.nr-center {
    height: 980px;
    border-radius: 10px;
    background-color: rgba(250, 246, 246, 0.504);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
    /*阴影 */
    width: 80%;
    margin-top: 15px;
    padding: 20px;
}

/* 封面图片 */
.FM_img {
    width: 50px;
    height: 50px;
    border-radius: 10px;
}

.bj-img {
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.bj-img:hover {
    transform: scale(1.1);
}

.sqlb {
    margin-top: 0px;
}

.table-data {
    width: 100%;
    border-radius: 10px;
    max-height: 600px;
    margin-top: 10px;
}
</style>